<!DOCTYPE html>
<html xmlns:zxw="http://www.w3school.com.cn"  >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="../js/common/layui/css/layui.css">
    <link rel="stylesheet" href="../css/common/animate.css" />
    <link rel="stylesheet" href="../css/common/common.css" />
    <style type="text/css" >
        .layui-layout-admin .layui-side{
            top: 0px;
            z-index: 1112;
        }
        .layui-layout-admin .layui-header{
            background-color: #00F7DE;
        }
        .layui-layout-admin .layui-side .layui-side-scroll{
            padding-top: 60px;
        }
        .layui-layout-admin .layui-side .layui-logo{
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #009688;
            font-size: 16px;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <!--<div class="layui-logo">layui 后台布局</div>-->
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item">
                <a href="">
                    <i style="font-size: 20px;font-weight: bold;" class="layui-icon layui-icon-shrink-right"></i>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <i style="font-size: 20px;font-weight: bold;" class="layui-icon layui-icon-refresh" ></i>
                </a>
            </li>
            <li class="layui-nav-item head_seach">
                <a href="javascript:;" class="" >
                    <i style="font-size: 20px;font-weight: bold;" class="layui-icon layui-icon-search" ></i>
                    <input type="text" style="height: 30px;padding-left: 5px; border: 0px; border-radius: 7px;" id="tab_seach" name="tab_seach" placeholder="搜索..." >
                </a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-logo">layui 后台布局</div>
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="admin1.html">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;">列表一</a>
                            <dl class="layui-nav-child">
                                <dd>
                                    <a href="javascript:;">列表一</a>
                                    <dl class="layui-nav-child">
                                        <dd>
                                            <a href="javascript:;">列表一</a>
                                            <dl class="layui-nav-child">
                                                <dd>
                                                    <a href="javascript:;">列表一</a>
                                                </dd>
                                            </dl>
                                        </dd>
                                    </dl>
                                </dd>
                            </dl>
                        </dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">发布商品</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-allowClose="false" >网站设置</li>
                <li>用户基本管理</li>
                <li>权限分配</li>
                <li>全部历史商品管理文字长一点试试</li>
                <li>订单管理</li>
                <li>订单管理</li>
                <li>订单管理</li>
                <li>订单管理</li>
                <li>订单管理</li>
                <li>订单管理</li>
                <li>订单管理</li>
                <li>订单管理</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <!--<div class="layui-upload">-->
                        <!--<button type="button" class="layui-btn" id="test1">上传图片</button>-->
                        <!--<div class="layui-upload-wrap" style="" >-->
                            <!--<div style="display: flex;" >-->
                                <!--<img style="width: 38px;height: 38px;" class="layui-upload-img" id="demo1">-->
                                <!--<div style="flex: 1;line-height: 38px;" >-->
                                    <!--<p id="demoText" style="display: inline-block;" ></p>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->

                </div>
                <div class="layui-tab-item">2</div>
                <div class="layui-tab-item">3</div>
                <div class="layui-tab-item">4</div>
                <div class="layui-tab-item">5</div>
                <div class="layui-tab-item">6</div>
            </div>
        </div>
        <span class="layui-breadcrumb">
          <a href="">首页</a>
          <a href="">国际新闻</a>
          <a href="">亚太地区</a>
          <a><cite>正文</cite></a>
        </span>

        <zxw:table cellMinWidth="10" sign_fun="edit.sign" select_fun="edit.select" edit_fun="edit.text" class="zxw_table layui-table layui-hide" height="315" page="true" loading="true" url="http://localhost:7762/user" id="textTable" >
            <zxw:thead class="zxw_head" >
                <zxw:tr class="zxw_tr" >
                    <zxw:th class="zxw_th" type="checkbox" fixed="left" ></zxw:th>
                    <zxw:th class="zxw_th" field="id" minWidth="10" sort="true" title="ID" >
                        <a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
                    </zxw:th>
                    <zxw:th class="zxw_th" field="username" edit="text" minWidth="10" sort="true" unresize="true" title="用户名" ></zxw:th>
                    <zxw:th class="zxw_th" field="sex" minWidth="10" sort="true" title="性别" >
                        <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" >
                    </zxw:th>
                    <zxw:th class="zxw_th" field="city" minWidth="10" sort="true" unresize="true" title="城市" ></zxw:th>
                    <zxw:th class="zxw_th" field="sign" minWidth="10" sort="true" unresize="true" title="签名" ></zxw:th>
                    <zxw:th class="zxw_th" field="experience" minWidth="10" sort="true" unresize="true" title="积分" ></zxw:th>
                    <zxw:th class="zxw_th" field="score" minWidth="10" sort="true" unresize="true" title="评分" ></zxw:th>
                    <zxw:th class="zxw_th" field="classify" minWidth="10" sort="true" unresize="true" title="职业" ></zxw:th>
                    <zxw:th colspan="1" class="zxw_th" field="wealth" minWidth="10" sort="true" unresize="true" title="财富" ></zxw:th>
                </zxw:tr>
            </zxw:thead>
        </zxw:table>
        <zxw:inputTime id="inputTime" width="200px" type="date" range="true" class="zxw_inputTime" ></zxw:inputTime>

        <zxw:signUpload class="zxw_signUpload" title="sss" fun="edit.upload" id="signUpload" ></zxw:signUpload>

        <zxw:multipleUpload class="zxw_multipleUpload" id="multipleUpload" title="请选择文件" ></zxw:multipleUpload>

        <div class="layui-form" >
            <div class="layui-form-item">
                <label class="layui-form-label">请选择城市</label>
                <div class="layui-input-inline">
                    <zxw:select class="zxw_select" key="name" value="id" id="test,test2,test3" url="http://localhost:7762/multipleSelect"  ></zxw:select>
                </div>
            </div>
        </div>
        <b class="loading" ></b>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="../js/common/layui/layui.all.js"></script>
<script src="../js/common/jquery/jquery-1.11.1.js" ></script>
<script src="../js/common/njzxw.js" ></script>
<script type="application/javascript" >

    //进行表格渲染
    var edit = {
        text:function(value,data,field){
            console.log(value);
            console.log(data);
            console.log(field);
        },
        /**
         *
         * @param state true/false
         * @param data 数据内容
         * @param type one/all 单选 多选
         */
        select:function(state,data,type){

        },
        upload:function(json){
            console.log(json);
        }
    }

    $('.head_seach').on('mouseenter',function(){
        $(this).find('input').stop();
        $(this).stop();
        $(this).css('width','155px').find('i').fadeOut(500);
        $(this).find('input').fadeIn(500);
    }).on('mouseleave',function(){
        $(this).find('input').stop();
        $(this).stop();
        $(this).css('width','40px').find('i').fadeIn(500);
        $(this).find('input').fadeOut(500);
    });

    var index = {
        init:function(){

        },
        /**
         * 加载菜单信息
         */
        loadMenu:function(){

        }
    }

</script>
</body>
</html>